<template>
    <div class="region">
        <div class="content">
            <div class="left">地区:</div>
            <ul>
                <li :class="{ active: activeFlag == '' }" @click="changeLevel('')">全部</li>
                <li @click="changeLevel(region.value)" :class="{ active: activeFlag == region.value }"
                    v-for="region in regionArr" :key="region.value">{{ region.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 引入API接口
import { reqHospitalLevelAndRegin } from '@/api/home/index'
// 引入ts类型
import { HospitalLevelAndReginArr, HospitalLevelAndReginResponseData } from '@/api/home/type'
import { ElMessage } from 'element-plus';
// 存储医院的等级与地区
let regionArr = ref<HospitalLevelAndReginArr>([])
// 控制等级高亮效果的响应式数据
let activeFlag = ref<string>('')

// 组件挂载完毕
onMounted(() => {
    getRegion();
})
// 封装一个方法:获取医院的等级与地区
const getRegion = async () => {
    // 调用API获取数据
    const result: HospitalLevelAndReginResponseData = await reqHospitalLevelAndRegin("Beijin");
    // 存储医院的等级与地区
    if (result.code == 200) {
        // 存储医院的等级与地区
        regionArr.value = result.data
    }else{
        ElMessage({
            type:'error',
            message:'请求医院地区相关数据失败'
        })
    }
}
// 接收父组件自定义事件
let $emit = defineEmits(['getRegion'])
// 等级切换的回调
const changeLevel = (level: string) => {
    activeFlag.value = level
    // 向父组件传递region
    $emit('getRegion', level)
}
</script>

<script lang="ts">
export default {
    name: 'Region',
}
</script>

<style scoped lang="scss">
.region {
    font-size: 14px;
    color: #7f7f7f;
    margin-bottom: 30px;

    .content {
        display: flex;

        .left {
            width: 40px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin: 0px 0px 15px 20px;

                &.active {
                    color: #6eb3ff;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>